<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>06_列表渲染</title>
  </head>
  <body>
    <!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

    <div id="demo">
      <h2>测试: v-for 遍历数组</h2>
      <ul>
        <li v-for="(student,index) in students" :key="index">
          {{`${student.id+'-'+student.name+'-'+student.age}`}}
        </li>
      </ul>
      <h2>测试: v-for 遍历对象</h2>
      <ul>
        <li v-for="(value,key) in students[0]" :key="key">
          {{`${key+'-'+value}`}}
        </li>
      </ul>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#demo',
        data: {
          students: [
            { id: 1, name: '张三', age: 15 },
            { id: 2, name: '张三', age: 20 },
            { id: 3, name: '张三', age: 23 },
            { id: 4, name: '张三', age: 9 },
          ],
        },
      })
    </script>
  </body>
</html>
